<template>
	<view class="bg-white ">
		<view v-if="list.length == 0" style="background-color: #F2F2F2;">
			<view class="p-2 mt-3"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
		</view>
		<view v-else class="px-2">
			<view
				class="case_item py-3"
				:class="{ 'honor_item_my mt-2': ismy }"
				v-for="(item, index) of list"
				:key="item.id"
				@click="goPages('/subPages/company_home/case_detail?id=' + item.id)"
			>
				<!-- 遮罩层 -->
				<!-- <view class="overlay" v-if="item.check"></view> -->
				<!-- <view class="top_cont flex justify-between" @tap.stop v-if="ismy">
					<view><view class="l_text font_24_2 text-white m-1" v-if="item.status == 1">上架中</view></view>
					<checkbox-group @change="checkChange(item, index)">
						<view class="check_box"><checkbox class="check" :value="item.id" :checked="item.check" /></view>
					</checkbox-group>
				</view> -->
				<view class="flex justify-between align-center" :class="{ 'cont ': ismy }">
					<view @tap.stop v-if="ismy" class="top_cont mr-2">
						<checkbox-group @change="checkChange(item, index)">
							<view class="check_box"><checkbox class="check" :value="item.id" :checked="item.check" color="#CF1526" /></view>
						</checkbox-group>
					</view>
					<view class="case_left" :class="{ 'pl-5 ': ismy }">
						<view class="h4 lh_42 text_hidden2">{{ item.title }}</view>
						<view class="c_9 pt font_24 text_hidden2" v-if="item.address">项目地点：{{ item.address }}</view>
						<view class="c_9 pt font_24" v-if="item.capacity">装机容量：{{ item.capacity }}</view>
					</view>
					<view class="case_img"><image :src="item.thumb" mode="aspectFill"></image></view>
				</view>
				<view class="product_btn" v-if="ismy">
					<text class="text_btn" @click.stop="goPages('/subPages/company_home/case_detail?id=' + item.id)">查看</text>
					<text class="text_btn" @click.stop="goPages('./publish/case_put?id=' + item.id)">编辑</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getProjectList } from '@/api/home/company.js';
import { caseDel } from '@/api/my/publish.js';
export default {
	props: {
		ismy: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			list: [],
			checkList: []
		};
	},
	onLoad(option) {
		console.log(option);
		this.getList(option.companyId);
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	created() {
		if (this.ismy) {
			this.getList();
		}
	},
	methods: {
		getList(val) {
			let msg = {
				uid: this.ismy ? uni.getStorageSync('userInfo').userId : val
			};
			getProjectList(msg).then(res => {
				// console.log(res);
				if (res.code == 0) {
					this.list = res.data;
				} else {
					uni.$u.toast('获取项目案例失败');
				}
			});
		},
		// 选择
		checkChange(val, idx) {
			this.$set(this.list[idx], 'check', !val.check);
			if (val.check) {
				this.checkList.push(val.id);
			} else {
				let index = this.checkList.map(item => item).indexOf(val.id);
				this.checkList.splice(index, 1);
			}
			this.$emit('delChange', [...new Set(this.checkList)].length);
		},
		// 删除
		checkDel() {
			this.checkList = [...new Set(this.checkList)];
			let msg = {
				token: uni.getStorageSync('userInfo').token || '',
				ids: this.checkList
			};
			caseDel(msg)
				.then(res => {
					// console.log(res);
					uni.$u.toast(res.msg);
					if (res.code == 0) {
						this.getList();
						this.$emit('delAfter');
					}
				})
				.catch(err => {
					console.log('删除失败', err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.case_item {
	width: 100%;
	border-bottom: 1px solid #c2c2c2;
	position: relative;
	.case_left {
		width: 80%;
	}
	.case_img {
		margin-left: 15rpx;
		image {
			width: 224rpx;
			height: 133rpx;
		}
	}
}
.case_item:last-child {
	border-bottom: 0;
}
.honor_item_my {
	background-color: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(210, 210, 210, 0.53);
	border-radius: 14rpx;
}
.overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 15rpx;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
}
.cont {
	padding-bottom: 50rpx !important;
	padding: 20rpx;
	position: relative;
}
.top_cont {
	position: absolute;
	top: 0;
	left: 0;
	width: 50rpx;
	height: 100%;
	z-index: 15;
	padding: 15rpx;
	// 	.l_text {
	// 		width: 120rpx;
	// 		height: 42rpx;
	// 		background: #ff8b19;
	// 		border-radius: 15rpx 0px 15rpx 0px;
	// 	}
	.check_box {
		z-index: 15;
		.check {
			transform: scale(0.7);
			margin-top: 50rpx;
		}
	}
}

.product_btn {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	maargin-top: 30rpx;

	text {
		width: 50%;
		background-color: $color14;
		color: $color2;
		text-align: center;
		padding: 10rpx 0;
		font-size: 28rpx;
		font-weight: bold;
	}

	text:first-child {
		border-right: 1px solid $color5;
		box-sizing: border-box;
		border-bottom-left-radius: 15rpx;
	}

	text:last-child {
		border-bottom-right-radius: 15rpx;
	}
	.text_btn {
		background-color: $color14;
		color: $color2;
	}
}
</style>
